<template>
    <div>
        <mt-header title="我的还款记录">
            <router-link to="/" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <van-pull-refresh style="height: 800px" v-model="refreshing" @refresh="onRefresh">
        <van-search
                v-model="keyword"
                @keydown.enter.native="getRepayList"
                shape="round"
                background="#fff"
                placeholder="请输入搜索关键词"
        />

            <van-tabs v-model="active">
                <van-tab title="交易记录">
                    <div style="float: left;width: 500px; margin-top: 10px"
                         v-for="(item, index) in repayList"
                         :key="index"
                    >
                        <div style="float: left;width: 360px;height: 180px; font-size: 14px; margin-left: 6px">
                            <el-card style="width: 100%; border-radius: 10px" class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>系统单号 {{item.payNo}}</span>
                                    <el-button style="float: right; padding: 3px 0" type="text">查看</el-button>
                                </div>
                                <div>
                                    <van-tag type="primary">支付单号</van-tag><span style="margin-left: 4px">{{item.orderNo}}</span>
                                    <van-tag style="margin-left: 10px" type="danger">还款金额</van-tag><span style="margin-left: 4px">{{item.money}}元</span><br/>
                                    <van-tag style="margin-top: 10px" type="success">支付项目</van-tag><span style="margin-left: 4px">{{item.body}}</span>
                                    <van-tag style="margin-left: 10px" type="warning">支付方式</van-tag><span style="margin-left: 4px">{{item.payChannel === 'alipay' ? '支付宝' : '微信'}}</span><br/>
                                    <van-tag style="margin-top: 10px" type="primary">支付状态</van-tag><span style="margin-left: 4px">{{item.payStatus === 1 ? '支付成功' : '未支付'}}</span><br/>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="继续还款">

                    <el-card style="margin-top: 10px; width: 360px; margin-left: 6px; height: 420px; border-radius: 10px" class="box-card">
                        <van-field label-width="120" name="radio" label="请选择还款方式">
                            <template #input>
                                <van-radio-group v-model="radio" direction="horizontal">
                                    <van-radio name="1">支付宝</van-radio>
                                    <van-radio name="2">微信</van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                        <van-cell-group>
                            <van-field label-width="120" v-model="repayMoney" label="请输入还款金额" placeholder="0.01" />
                        </van-cell-group>
                        <van-image style="margin-left: 60px; margin-top: 10px" width="200" height="200" :src="payQRcode" />
                        <van-button @click="doPay" style="margin-left: 106px; margin-top: 20px" plain type="primary">刷新二维码</van-button>
                    </el-card>

                </van-tab>
            </van-tabs>

        </van-pull-refresh>
    </div>
</template>

<script>

    import axios from "axios";
    import Notify from "vant/lib/notify";
    import Toast from "vant/lib/toast";

    export default {
        data() {
            return{
                payQRcode: '',
                repayMoney: '0.01',
                radio: '1',
                active: 0,
                refreshing: false,
                repayList: [],
                keyword: ''
            }
        },
        created() {
            this.getRepayList()
            this.doPay() // 默认加载支付宝
        },
        watch: {
          'radio'(newValue, oldValue) {
              if (newValue === '1') {
                  axios.get('http://124.70.180.155:8080/system/user/profile',
                      {
                          headers: { Authorization: sessionStorage.getItem('token')}
                      }).then(res => {
                      var formData = new FormData()
                      formData.append("totalFree", this.repayMoney)
                      formData.append("userId", res.data.data.userId)
                      console.log(formData)
                      axios.post('http://124.70.180.155:8080/repay/data/realPay', formData,
                          {
                              headers: { Authorization: sessionStorage.getItem('token')}
                          }).then(res => {
                          console.log('支付宝支付二维码: ')
                          console.log(res.data.result)
                          this.payQRcode = res.data.result
                      })
                  })
              } else if (newValue === '2') {
                  axios.get('http://124.70.180.155:8080/system/user/profile',
                      {
                          headers: { Authorization: sessionStorage.getItem('token')}
                      }).then(res => {
                      var formData = new FormData()
                      formData.append("totalFree", this.repayMoney)
                      formData.append("userId", res.data.data.userId)
                      console.log(formData)
                      axios.post('http://124.70.180.155:8080/repay/data/wxPay', formData, {
                          headers: { Authorization: sessionStorage.getItem('token')}
                      }).then(res => {
                          console.log('微信支付二维码: ')
                          console.log(res.data.result)
                          this.payQRcode = res.data.result
                      })
                  })
              }
          }
        },
        methods: {
            doPay() {

                if (sessionStorage.getItem('token') === null) {
                    Notify({ type: 'danger', message: '请先登录' });
                }

                if (this.radio === '1') {
                    axios.get('http://124.70.180.155:8080/system/user/profile',
                        {
                            headers: { Authorization: sessionStorage.getItem('token')}
                        }).then(res => {
                        var formData = new FormData()
                        formData.append("totalFree", this.repayMoney)
                        formData.append("userId", res.data.data.userId)
                        console.log(formData)
                        axios.post('http://124.70.180.155:8080/repay/data/realPay', formData,
                            {
                                headers: { Authorization: sessionStorage.getItem('token')}
                            }).then(res => {
                            console.log('支付宝支付二维码: ')
                            console.log(res.data.result)
                            this.payQRcode = res.data.result
                        })
                    })
                } else if (this.radio === '2') {
                    axios.get('http://124.70.180.155:8080/system/user/profile',
                        {
                            headers: { Authorization: sessionStorage.getItem('token')}
                        }).then(res => {
                        var formData = new FormData()
                        formData.append("totalFree", this.repayMoney)
                        formData.append("userId", res.data.data.userId)
                        console.log(formData)
                        axios.post('http://124.70.180.155:8080/repay/data/wxPay', formData, {
                            headers: { Authorization: sessionStorage.getItem('token')}
                        }).then(res => {
                            console.log('微信支付二维码: ')
                            console.log(res.data.result)
                            this.payQRcode = res.data.result
                        })
                    })
                }


            },
            getRepayList() {
                if (sessionStorage.getItem('token') === null) {
                    Notify({ type: 'danger', message: '请先登录' });
                }
                axios.get('http://124.70.180.155:8080/system/user/profile',
                    {
                        headers: { Authorization: sessionStorage.getItem('token')}
                    }).then(res => {
                    this.user = res.data.data
                        axios.get('http://124.70.180.155:8080/repay/data/selectPayOrderListBySysUser/' + this.user.userName,
                            {
                                headers: {Authorization: sessionStorage.getItem('token')}
                            }).then(res => {
                            console.log(res.data.data)
                            this.repayList = res.data.data
                        })
                })
            },
            onRefresh() {
                setTimeout(() => {
                    Toast('刷新成功')
                    if (sessionStorage.getItem('token') === null) {
                        Notify({ type: 'danger', message: '请先登录' });
                    }
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
        }
    }
</script>

<style scoped>

</style>
